<template>
  <div>
    <!--    分割线-->
    <el-divider></el-divider>
    <!--  添加表单-->
    <el-form ref="systemRoleForm" :model="systemRoleForm" :rules="rules" label-width="100px">
      <div class="grid-content">
        <div>
          <el-form-item label="角色名称:" prop="roleName">
            <el-input style="width: 200px" v-model="systemRoleForm.roleName"></el-input>
          </el-form-item>
        </div>
      </div>
      <div class="grid-content">
        <div>
          <el-form-item label="角色描述:" prop="roleText">
            <el-input style="width: 200px" v-model="systemRoleForm.roleText"></el-input>
          </el-form-item>
        </div>
      </div>
      <!--    分割线-->
      <el-divider></el-divider>
      <!--      树形图-->
      <el-tree
          check-strictly=true
          :props="{label:'authorityName'}"
          :data="options"
          accordion
          show-checkbox
          :default-checked-keys="systemRoleForm.list"
          node-key="id"
          ref="tree">
      </el-tree>
      <!--    分割线-->
      <el-divider></el-divider>
      <div class="addBut">
        <el-button type="primary" plain @click="addOrUpdateSysRole">提交</el-button>
        <el-button type="primary" plain @click="goBack">返回</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "SystemRoleInsert.vue",
  data() {
    return {
      rules: {
        id: this.$route.params.id,
        roleName: [
          {required: true, message: '请输入角色名称', trigger: 'blur'},
        ],
        roleText: [
          {required: true, message: '请描述该角色', trigger: 'blur'}
        ],
      },
      systemRoleForm: {
        roleId: this.$route.params.id,
        list: []
      },
      //  树形图
      options: [],
      defaultChecked:[]
    }
  },
  created() {
    this.getSystemAuthority();
    this.init()

  },
  methods: {
    init() {
      if (this.$route.params && this.$route.params.id) {//如果进入页面有id   为修改
        // 按id查默认数据
        this.getSystemRoleId(this.$route.params.id);
      }
    },
    //根据id查询
    getSystemRoleId(id) {
      this.$http.get('systemRole', {params: {'id':id, "chaxun": "1"}})
          .then((res) => {
            this.systemRoleForm=res.data.data;
            console.log("返回值为==>"+this.systemRoleForm)

          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //查询权限表
    getSystemAuthority() {
      this.$http.get('systemAuthority', {params: {"chaxun": "1"}})
          .then((res) => {
            this.options = res.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    addOrUpdateSysRole(){
      if (this.$route.params && this.$route.params.id) {//如果进入页面有id   为修改
        this.updateSysRole();//调用修改方法
      }else {
        this.addSysRole();//调用添加方法
      }

    },
    //修改角色权限
    updateSysRole() {
      this.systemRoleForm.list = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
      this.$http.put('systemRole', this.systemRoleForm)
          .then(
              this.$notify({
                type:"success",
                message:"修改成功"
              }),
              this.$router.push({name:"SystemUser"})
          )
          .catch(function (error) {
            console.log(error);
          });
    },
    //添加角色权限
    addSysRole() {
      this.systemRoleForm.list = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
      this.$http.post(`systemRole`, this.systemRoleForm)
          .then(
              this.$notify({
                type:"success",
                message:"添加成功"
              }),
              this.$router.push({name:"SystemUser"})
          )
          .catch(function (error) {
            console.log(error);
          });
    },
    goBack() {
      this.$router.push({name:"SystemUser"})
    }
  }
}
</script>

<style scoped>
.addBut {
  text-align: center;
}

.grid-content {
  border: 1px solid gainsboro;
}

.grid-content > div {
  margin: 2% 0 0 35%
}
</style>